<template>
  <div class="detail">

    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="详情页"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />

    <div class="shop">
      <!-- 侧边导航 -->
    <van-sidebar v-model="activeKey">
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
    </van-sidebar>

    <!-- 商品卡片 -->
    <div class="shop_card">
      <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    />
    <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    />


    </div>
    </div>
    <div class="summary">
                <span >总数:0 总价:0</span>
                <span>去结算</span>
            </div>
    </div>
    

</template>

<script>
import {shop_detail} from '../utils/api'
export default {
  data() {
    return {
      activeKey: 0,
    };
  },
  mounted(){
    // shop_detail().then((res)=>{
    //         console.log(res.data.shopinfo);
    //         // this.list = res.data.list;
    //     })
  }
}
</script>

<style lang="scss" scoped>
.shop{
  display: flex;
  // justify-content: space-between;

}
.shop_card{
  width: 100%;
}
.van-card{
  width: 100%;
}
.summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #555;
  color: white;
  left: 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
}
.summary span:nth-child(2){
  background-color: lightgreen;
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
}
</style>